<template>
	<view class="app">
		<view class="main-wrap show">
			<view class="addr-sec">
				<!--
				<view class="addr-empty row fill">
					<text class="mix-icon icon-dizhi"></text>
					<text>请选择收货地址</text>
				</view>
				-->
				<view class="addr-wrap">
					<text class="mix-icon icon-dizhi"></text>
					<view class="con column">
						<text class="addr">辽宁省 沈阳市 和平区 国际软件园 E4-21</text>
						<text class="name">姓名 13954221575</text>
					</view>
				</view>
				<text class="mix-icon icon-you"></text>
				<image class="bg" src="/static/icon/addr-line.png"></image>
			</view>
			<!-- 商品列表 -->
			<view class="goods-sec">
				<view>
					<view class="list" v-for="(item, index) in proList" :key="index">
						<view class="item row b-b">
							<image class="pic" :src="item['imglist'][0]" mode="aspectFill"></image>
							<view class="right column">
								<text class="title clamp">{{ item.name}}</text>
								<text class="sku">{{ item.typename}}</text>
								<view class="price-wrap">
									<text class="price">{{ item.money}}</text>
									<text class="number">x 1</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="more-btn center">
						<text>展开更多</text>
						<text class="mix-icon icon-xia"></text>
					</view> -->
				</view>
			</view>

			<!-- 价格信息 -->
			<view class="price-sec">
				<view class="cell row">
					<text class="tit fill">商品金额</text>
					<text class="price">1125.74</text>
				</view>
				<view class="cell row">
					<text class="tag">满</text>
					<text class="tit fill">订单满减</text>
					<text class="price"> 0</text>
				</view>
				<view class="cell row">
					<text class="tag red">券</text>
					<text class="tit fill">优惠券</text>
					<text class="price disabled">暂无可用</text>
					<!-- <template>
						<text class="price red">21</text>
						<text class="price red">请选择优惠券</text>
						<text class="mix-icon icon-you"></text>
					</template> -->
				</view>
				<view class="cell row">
					<text class="tit fill">配送费</text>
					<text class="price">25</text>
				</view>
				<view class="total row b-t">
					<text class="price">1100.74</text>
				</view>
			</view>
			<view class="remarks column">
				<text class="title">订单备注：</text>
				<textarea class="input" placeholder="选填，合理需求我们会尽量满足 .." placeholder-style="color: #999" />
			</view>
			<!-- 底部栏 -->
			<view class="bot-fill-view"></view>
			<view class="bottom row">
				<view class="fill">
					<text class="tip">实付款：</text>
					<text class="price fill">1100.74</text>
				</view>
				<view class="btn center" @click="payorder()">
					<text>提交订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				proList: [],
			}
		},
		onLoad() {
			let that = this;
			that.proList = that.globals.proList;
			console.log('产品数据', that.proList);
		},
		methods: {
			// ----- 跳转支付 ----
			payorder() {
				let url = '/pages/order/payorder';
				console.log(url)
				this.navTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.b-b:after {
		left: 4rpx;
		right: 4rpx;
		border-color: #ececec;
	}

	.app {
		padding: 16rpx 24rpx 20rpx;
	}

	.main-wrap {
		opacity: 0;
		transition: .2s;

		&.show {
			opacity: 1;
		}
	}

	.addr-sec {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;

		.addr-empty {
			margin: 16rpx 0 24rpx;
			font-size: 30rpx;
			color: #666;

			.icon-dizhi {
				transform: translateY(0rpx);
				margin-right: 16rpx;
			}
		}

		.addr-wrap {
			display: flex;
			flex: 1;
		}

		.icon-dizhi {
			transform: translateY(6rpx);
			font-size: 32rpx;
			color: $base-color;
		}

		.icon-you {
			flex-shrink: 0;
			transform: translateY(50%);
			position: relative;
			top: -14rpx;
			font-size: 26rpx;
			color: #999;
		}

		.con {
			flex: 1;
			padding: 0 80rpx 10rpx 20rpx;
			;
		}

		.addr {
			margin-bottom: 16rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 1.4;
			font-weight: 700;
		}

		.name {
			font-size: 28rpx;
			color: #999;
		}

		.bg {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
		}
	}

	.goods-sec {
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
	}

	.price-sec {
		padding-top: 14rpx;
		border-radius: 0 0 10rpx 10rpx;
		background-color: #fff;

		.cell {
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			color: #333;
		}

		.price {
			font-weight: 700;

			&.red {
				color: $base-color;
			}

			&.disabled {
				color: #999;
				font-weight: normal;
			}
		}

		.total {
			justify-content: flex-end;
			height: 80rpx;
			padding-right: 20rpx;
			margin-top: 16rpx;
			font-size: 30rpx;
			color: #333;

			.price:before {
				content: '小计：';
				font-weight: normal;
			}
		}

		.tag {
			padding: 6rpx 8rpx;
			margin-right: 8rpx;
			font-size: 20rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: orange;

			&.red {
				background-color: $base-color;
			}
		}

		.icon-you {
			margin-left: 8rpx;
			font-size: 20rpx;
			color: #999;
		}
	}

	.remarks {
		padding: 24rpx 24rpx;
		margin-top: 16rpx;
		border-radius: 12rpx;
		background-color: #fff;

		.title {
			margin-bottom: 24rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
		}

		.input {
			flex: 1;
			min-height: 140rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.bot-fill-view {
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, .06);
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.tip {
			margin-left: 24rpx;
			font-size: 28rpx;
			color: #999;
		}

		.price {
			margin-right: 30rpx;
			font-size: 36rpx;
			color: $base-color;
			font-weight: 700;
			text-align: right;
		}

		.btn {
			min-width: 180rpx;
			height: 70rpx;
			padding: 0 26rpx;
			margin-right: 20rpx;
			border-radius: 100rpx;
			background-color: $base-color;
			font-size: 30rpx;
			color: #fff;
		}
	}
</style>


<style scoped lang="scss">
	.more-btn {
		padding: 16rpx 0 12rpx;
		margin-top: -4rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		z-index: 10;
		background-color: #fff;

		.icon-xia {
			margin-left: 4rpx;
			font-size: 28rpx;
		}

		.active {
			transform: scale(-1);
		}
	}

	.list {
		max-height: 380rpx;
		overflow: hidden;

		&.show {
			max-height: 9999rpx;
		}
	}

	.item {
		width: 100%;
		height: 190rpx;
		padding: 24rpx 0 24rpx 24rpx;
		background-color: #fff;

		&:after {
			border-color: #e5e5e5;
		}
	}

	.pic {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
	}

	.right {
		flex: 1;
		color: #333;
		overflow: hidden;
	}

	.title {
		margin-right: 24rpx;
		margin-top: 0rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.sku {
		height: 40rpx;
		margin: 10rpx 0 20rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888;
	}

	.price-wrap {
		display: flex;
		align-items: baseline;
		padding-right: 20rpx;
	}

	.price {
		margin-right: 16rpx;
		font-size: 28rpx;
		line-height: 1;

		&:before {
			content: "￥";
			font-size: 26rpx;
		}
	}

	.number {
		font-size: 26rpx;
		color: #666;
	}
</style>
